<template>
	<view>
		<view class="xm-flex-c xm-justify-center xm-align-content-center xm-brr-20rpx"
			style="background-color: #FFFFFF;width: 100%;height: auto;align-items: center;padding: 30rpx;">
			<view class="xm-flex-r xm-justify-between"
				style="align-items: center;width: 90%;height: 157rpx;margin-top: 68rpx;margin-bottom: 30rpx;">
				<view class="">
					头像
				</view>
				<image @click="upIcon(0)"
					:src="data.top_icon==undefined?'https://img0.baidu.com/it/u=19766716,3349517949&fm=26&fmt=auto':data.top_icon"
					mode="" style="height: 157rpx;width: 157rpx;border-radius: 157rpx;background-color: #26ACD4;">
				</image>
			</view>

			<view class="" style="width: 90%;">
				名称
			</view>

			<input type="text" value="" placeholder="请输入昵称" v-if="data!=undefined" v-model="data.user_name"
				style="margin-top: 30rpx;margin-bottom: 30rpx;width: 90%;border-bottom: 4rpx #a6a2a2 solid;padding: 15rpx;border-radius: 0rpx;padding-left: 20rpx;" />

			<view class="" style="width: 90%;">
				今日心情
			</view>
			<input type="text" value="" placeholder="请输入心情" v-if="data!=undefined" v-model="data.user_mood"
				style="margin-top: 30rpx;margin-bottom: 30rpx;width: 90%;border-bottom: 4rpx #a6a2a2 solid;padding: 15rpx;border-radius: 0rpx;padding-left: 20rpx;" />



			<!-- <view class="" style="width: 90%;">
				账号
			</view>
			<input type="text" value="" placeholder="请输入账号" v-model="data.teleplone"
				style="margin-top: 30rpx;margin-bottom: 30rpx;width: 90%;border-bottom: 4rpx #a6a2a2 solid;padding: 15rpx;border-radius: 0rpx;padding-left: 20rpx;" />
 -->
			<view class="xm-flex-r" style="width: 90%;margin-bottom: 30rpx;">
				性别
				<checkbox-group style="margin-left: 30rpx;" @change="checkboxChange">

					<label style="margin-right: 30rpx;" v-for="(item,value) in ['男','女']" :key="value">
						<checkbox :value="item" v-if="data!=undefined" :checked="value==data.sex" />{{item}}
					</label>

				</checkbox-group>
			</view>


			<view class="xm-but" hover-class="but-selct" @click="update()"
				style="text-align: center;width: 70%;height: 70rpx;line-height: 70rpx;border-radius: 20rpx;margin-top: 60rpx;color: #FFFFFF;">
				确认修改
			</view>

			<view class="xm-flex-r xm-justify-between"
				style="align-items: center;width: 90%;margin-top: 30rpx;margin-bottom: 100rpx;">
				<!-- 				<view class="xm-fontsize-15" style="color: #555555;">
					忘记密码
				</view>
				<view class="xm-fontsize-15" style="color: #555555;">
					注册用户
				</view> -->
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: undefined
			}
		},
		// onLoad() {
		// 	uni.getStorage({
		// 		key:"token",
		// 		success:data=>{
		// 			console.log(data.data);
		// 			this.id = data.data
		// 			this.findon()
		// 		}
		// 	})
		// },
		onShow() {
			uni.getStorage({
				key: "token",
				success: data => {
					console.log(data.data);
					this.id = data.data
					this.findon()
				}
			})
		},
		methods: {
			upIcon(data) {
				let self = this

				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: self.$url.user.upfile, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								var value = JSON.parse(uploadFileRes.data);
								console.log(value);
								self.data.top_icon = self.$url.apiimg + value.url
							}
						});
					},
					fail: err => {
						console.log(err)
					}
				});
			},
			checkboxChange(data) {
				console.log(data);
				if (this.data.sex == 1) {
					this.data.sex = 0
				} else {
					this.data.sex = 1
				}
				console.log(this.data.sex);
			},
			findon() {
				// console.log("ads");
				this.$http(this.$url.user.findone, "post", {
					user_id: this.id,
				}, {
					'content-type': 'application/json'
				}).then(res => {
					this.data = res.data
					console.log(this.data);
				})
			},
			update() {
				this.$http(this.$url.user.update, "post", this.data, {
					user_id: this.id
				}, {
					'content-type': 'application/json'
				}).then(res => {
					// this.data = res.data
					// console.log(this.data);
					console.log(res);
					this.$api.gotoType("back")
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #C0C0C0;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.xm-but {
		background: linear-gradient(to right, #26acd4, #d6d6d6);
	}
</style>
